import React from 'react'
import { Row, Col, Card, Skeleton, Space } from 'antd'

const DashboardSkeleton: React.FC = () => {
  return (
    <div className="p-6 animate-pulse">
      <Space direction="vertical" size="large" className="w-full">
        {/* Announcement Skeleton */}
        <Card className="shadow-sm">
          <Skeleton active paragraph={{ rows: 2 }} />
        </Card>

        <Row gutter={[24, 24]}>
          {/* User Info Card Skeleton */}
          <Col xs={24} lg={8}>
            <Card className="text-center">
              <div className="flex flex-col items-center">
                <Skeleton.Avatar size={80} active />
                <div className="mt-4 w-full">
                  <Skeleton active paragraph={{ rows: 3 }} />
                </div>
              </div>
            </Card>
          </Col>

          {/* Quick Action Cards Skeleton */}
          <Col xs={24} lg={16}>
            <div>
              <Skeleton.Input active size="small" className="mb-4 w-32" />
              <Row gutter={[16, 16]}>
                {[1, 2, 3, 4].map((item) => (
                  <Col xs={12} sm={12} md={6} lg={6} key={item}>
                    <Card>
                      <div className="py-4 text-center">
                        <Skeleton.Avatar size={40} shape="square" active className="mb-3" />
                        <Skeleton active title={{ width: '80%' }} paragraph={{ rows: 1 }} />
                      </div>
                    </Card>
                  </Col>
                ))}
              </Row>
            </div>
          </Col>
        </Row>

        {/* Timeline Skeleton */}
        <Card className="shadow-sm">
          <Skeleton active />
          <div className="mt-4">
            {[1, 2, 3].map((item) => (
              <div key={item} className="flex items-start mb-4">
                <Skeleton.Avatar size="small" className="mr-3 mt-1" />
                <div className="flex-1">
                  <Skeleton active paragraph={{ rows: 1 }} />
                </div>
              </div>
            ))}
          </div>
        </Card>
      </Space>
    </div>
  )
}

export default React.memo(DashboardSkeleton)

export { DashboardSkeleton }